<template>
	<div class="user-box">
		<template>
			<el-row class="box-flex" >
				<el-button type="primary" @click="memberAddFn" size="mini">注册会员</el-button>
				<el-button type="primary" @click="auditMemberFn" size="mini" v-if="getMemberAudit">审核</el-button>
			</el-row>
			<div class="mg-bg">
				<el-row class=" box-flex">
					<el-col :span="2" class="box-flex m-l-10">
						<el-select v-model="filterValue" placeholder="请选择" size="mini">
							<el-option v-for="item in filterList" :key="item.value" :label="item.label" :value="item.value">
							</el-option>
						</el-select>
					</el-col>
					<el-col :span="2" class="box-flex m-l-10">
						<el-input placeholder="请输入内容" v-model="keyword" clearable size="mini"></el-input>
					</el-col>
					<span class="role-span text-14">用户角色</span>
					<el-col :span="2" class="box-flex m-l-10">
						<el-select v-model="userRole" placeholder="请选择" size="mini">
							<el-option v-for="item in userRoleList" :key="item.value" :label="item.label" :value="item.value">
							</el-option>
						</el-select>
					</el-col>
					<span class="role-span text-14">会员等级</span>
					<el-col :span="2" class="box-flex m-l-10" >
						<el-select v-model="userType" placeholder="请选择" size="mini">
							<el-option v-for="item in userList" :key="item.value" :label="item.label" :value="item.value">
							</el-option>
						</el-select>
					</el-col>
					<span class="role-span">状态</span>
					<el-col :span="2" class="box-flex m-l-10">
						<el-select v-model="userStatus" placeholder="请选择" size="mini">
							<el-option v-for="item in userStatusList" :key="item.value" :label="item.label" :value="item.value">
							</el-option>
						</el-select>
						<el-button type="primary" class="m-l-10" @click="screenFn(1)" size="mini">筛选</el-button>
						<el-button type="primary" @click="screenFn(2)" size="mini">重置</el-button>
					</el-col>
				</el-row>
				<!-- <el-row>
					<el-col :span="4" class="m-l-10">
						
						
					</el-col>
				</el-row> -->
			</div>
			<div class="tab-box">
				<el-table :data="memberList" @selection-change="handleSelectionChange" style="width: 100%">
					<el-table-column type="selection" >
					</el-table-column>
					<el-table-column label="头像" align="left">
						<template slot-scope="scope">
							<img class="avatar" v-if="scope.row.icon"  :src="scope.row.icon">
							<span v-else>-</span>
						</template>
					</el-table-column>
					<el-table-column prop="mobile" label="手机号"  align="center"></el-table-column>

					<el-table-column prop="nickName" label="昵称"  align="center"></el-table-column>
					<el-table-column prop="companyName" label="公司名称"  align="center"></el-table-column>
					<el-table-column prop="companyAddress" label="公司地址"  align="center"></el-table-column>
					<el-table-column label="用户角色"  align="center">
						<template slot-scope="scope">
							{{scope.row.role == 'OWNER'? '车主' : scope.row.role == 'PARTS'? '配件商':'修理厂'}}
						</template>
					</el-table-column>
					<el-table-column label="会员等级"  align="center">
						<template slot-scope="scope">
							{{scope.row.userType == 'STAR1'? '1级' : scope.row.role == 'STAR2'? '2级':'3级'}}
						</template>
					</el-table-column>
					<el-table-column label="状态" align="center">
						<template slot-scope="scope">
							{{scope.row.userStatus == 'USER_UNCHECK'? '等待审核' : scope.row.userStatus == 'USER_CHECK_FAILED'? '冻结':'审核通过'}}
						</template>
					</el-table-column>

					<el-table-column label="操作" align="center">
						<template slot-scope="scope">
							<el-button @click="toConEditer(scope.row)" size='mini' type="primary" style="margin-bottom: 5px;">消费记录</el-button>
							<el-button size='mini' type="primary" @click="dialogTableFn(scope.row)" style="margin-left: 0px;">维修记录</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<el-dialog title="注册会员" :visible.sync="centerDialogVisible" width="30%" center>
				<el-row class="p-all-20 ">
					<el-col :span="20" class="box-flex m-b-10">
						<span class="sp-w-50 m-r-10">手机号</span>
						<el-input placeholder="请输入手机号" v-model="userMobile" maxLength="11" />
					</el-col>

					<el-col :span="20" class="box-flex m-b-10">
						<span class="sp-w-50 m-r-10">密码</span>
						<el-input placeholder="请输入密码" v-model="userPassword" />
					</el-col>
					<el-col :span="20" class="box-flex m-b-10">
						<span class="sp-w-50 ">角色</span>
						<el-select v-model="editRoleValue" placeholder="请选择">
							<el-option v-for="item in userRoleList" :key="item.value" :label="item.label" :value="item.value">
							</el-option>
						</el-select>
					</el-col>
				</el-row>
				<span slot="footer" class="dialog-footer">
					<el-button @click="centerDialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="addSubmitFn">确 定</el-button>
				</span>
			</el-dialog>
			<!--审核-->
			<el-dialog title="审核" :visible.sync="centerDialog" width="30%" center>
				<el-row class="p-all-20 ">

					<el-col :span="20" class="box-flex m-b-10">
						<span class="sp-w-50 ">状态</span>
						<el-select v-model="status" placeholder="请选择">
							<el-option v-for="item in userStatusList" :key="item.value" :label="item.label" :value="item.value">
							</el-option>
						</el-select>
					</el-col>
				</el-row>
				<span slot="footer" class="dialog-footer">
					<el-button @click="centerDialog = false">取 消</el-button>
					<el-button type="primary" @click="auditSubmitFn">确 定</el-button>
				</span>
			</el-dialog>

			<!--消费记录-->
			<el-dialog title="消费记录" center :visible.sync="dialogTableVisible">
				<el-table :data="consumptionList">
					<el-table-column label="昵称" width="150" align="center">
						<template slot-scope="scope">
							{{nickName}}
						</template>
					</el-table-column>
					<el-table-column property="orderId" label="订单号" width="200" align="center"></el-table-column>
					<el-table-column property="money" label="金额" align="center"></el-table-column>
					<el-table-column property="createTime" label="下单时间" align="center"></el-table-column>
					<el-table-column label="订单详情" align="center" v-if="basicMall">
						<template slot-scope="scope">
							<el-button size='mini' type="primary" @click="$router.push({path:'/order',query:{orderId:scope.row.orderId}})">订单详情</el-button>
						</template>
					</el-table-column>
				</el-table>
				<div class="page-box">
					<span>共{{total}}条</span>
					<current-page :current-page="logPage" :page-size="logPageSize" :page-total="total" @handleCurrentChange="handleTabChange"></current-page>
				</div>
			</el-dialog>

			<!--维修记录-->
			<el-dialog title="维修记录" center :visible.sync="dialogTabMaintenance"  width="50%">
				<el-table :data="maintenanceList">
					<el-table-column property="userId" label="昵称" width="150" align="center"></el-table-column>
					<el-table-column property="id" label="维修记录号" width="200" align="center"></el-table-column>
					<el-table-column property="maintenanceContent" label="维修标题" align="center"></el-table-column>
					<el-table-column property="createTime" label="维修时间" align="center"></el-table-column>
					<!-- <el-table-column label="订单详情">
						<template>订单详情</template>
					</el-table-column> -->
				</el-table>
				<div class="page-box">
					<span>共{{maintenTotal}}条</span>
					<current-page :current-page="maintenPage" :page-size="maintenPageSize" :page-total="maintenTotal" @handleCurrentChange="handlemaintenTabChange"></current-page>
				</div>
			</el-dialog>
			<current-page :current-page="page" :page-size="pageSize" :page-total="logPageTotal" @handleCurrentChange="handleCurrentChange"></current-page>
		</template>
	</div>
</template>

<script>
	import {mapGetters } from 'vuex'
	import {
		SUCCESS_REQUEST_STATUS
	} from '@/utils/config.js'
	import {
		getToken
	} from '@/utils/auth'
	import currentPage from '@/components/current-page/current-page.vue'
	export default {

		data() {
			return {
				page: 0,
				pageSize: 20,
				keyword: '',
				status: '',
				userPassword: '',
				userMobile: '',
				// 用户审核状态
				userStatus: '',
				nickName: '',
				// 用户角色
				userRole: '',
				memberList: [],
				// 会员等级
				userType: '',
				basicMall:false,			// 是否开通商城
				centerDialog: false,
				logPageTotal: 0,
				filterValue: '',
				editRoleValue: '',
				filterList: [{
						value: 'mobile',
						label: '手机号'
					},
					{
						value: 'name',
						label: '昵称'
					}
				],
				userRoleList: [{
						value: 'OWNER',
						label: '车主'
					},
					{
						value: 'PARTS',
						label: '配件商'
					},
					{
						value: 'REPAIR',
						label: '修理厂'
					}
				],
				userList: [{
						value: 'STAR1',
						label: '一级'
					},
					{
						value: 'STAR2',
						label: '二级'
					},
					{
						value: 'STAR3',
						label: '三级'
					},
				],
				userStatusList: [{
						value: 'USER_UNCHECK',
						label: '等待审核'
					},
					{
						value: 'USER_CHECK_FAILED',
						label: '冻结'
					},
					{
						value: 'USER_CHECK_SUCCEED',
						label: '审核通过'
					},
				],
				multipleSelection: [],
				consumptionList: [],
				centerDialogVisible: false,
				dialogTableVisible: false,
				logPage: 0,
				logPageSize: 10,
				total: 0,
				// 维修记录相关的
				maintenanceList: [],
				maintenTotal: 0,
				maintenPage: 0,
				transactionId: '',
				recordId: '',
				maintenPageSize: 5,
				dialogTabMaintenance: false,

			}
		},
		created() {
			this._initMemberData()
			this.basicMall =  window.localStorage.getItem('basicMall') ?  JSON.parse(window.localStorage.getItem('basicMall')) : false
		},
		methods: {
			// 显示维修记录
			dialogTableFn(item = '') {
				this.recordId = item ? item.id : this.recordId
				this.nickName = item ? item.nickName : this.nickName
				this.$ajax({
					api: 'member/maintenance/record/list',
					params: {
						page: this.maintenPage,
						pageSize: this.maintenPageSize,
						token: getToken(),
						userId: this.recordId,
						merchantUserId: window.localStorage.getItem('merchantUserId') ? window.localStorage.getItem('merchantUserId') :
							'',
					}
				}).then(res => {
					console.log(res)
					if (res.status === SUCCESS_REQUEST_STATUS) {
						this.maintenanceList = res.data.list
						this.maintenPage = res.data.page.page
						this.maintenTotal = res.data.page.total
						if (!this.maintenanceList.length) {
							this.$message({
								type: 'error',
								message: '没有维修记录'
							})
							return
						}
						this.dialogTabMaintenance = true
					}
				}).catch(err => {
					this.$message({
						type: 'error',
						message: err.message
					})
				})
			},
			// 维修记录分页
			handlemaintenTabChange(page) {
				this.maintenPage = page
				this.dialogTableFn()
			},
			// 查看消费记录
			toConEditer(item = '') {
				this.transactionId = item ? item.id : this.transactionId
				this.nickName = item ? item.nickName : this.nickName
				this.$ajax({
					api: 'member/transaction/query',
					params: {
						page: this.logPage,
						pageSize: this.logPageSize,
						token: getToken(),
						userId: this.transactionId,
						merchantUserId: window.localStorage.getItem('merchantUserId') ? window.localStorage.getItem('merchantUserId') :
							'',
					}
				}).then(res => {
					console.log(res)
					if (res.status === SUCCESS_REQUEST_STATUS) {
						this.consumptionList = res.data.transactionLogList
						this.logPage = res.data.page.page
						this.total = res.data.page.total
						if (!this.consumptionList.length) {
							this.$message({
								type: 'error',
								message: '没有消费记录'
							})
							return
						}
						this.dialogTableVisible = true
					}
				}).catch(err => {
					this.$message({
						type: 'error',
						message: err.message
					})
				})

			},
			handleTabChange(page) {
				this.logPage = page
				this.toConEditer()
			},
			// 确定审核
			auditSubmitFn() {
				let userIds = []
				if (!this.status) {
					this.$message({
						type: 'error',
						message: '请选择状态'
					})
					return
				}
				this.multipleSelection.forEach((item) => {
					userIds.push(item.id)
				})
				console.log(userIds)
				this.$ajax({
					api: 'member/audit',
					params: {
						token: getToken(),
						userStatus: this.status,
						userIds: userIds.join(','),
						merchantUserId: window.localStorage.getItem('merchantUserId') ? window.localStorage.getItem('merchantUserId') :
							'',
					}
				}).then(res => {
					if (res.status === SUCCESS_REQUEST_STATUS) {
						this.$message({
							type: 'success',
							message: '添加成功'
						})
						this.page = 0
						this._initMemberData()
						this.centerDialog = false
					}
				}).catch(err => {
					this.$message({
						type: 'error',
						message: err.message
					})
				})
			},
			// 审核
			auditMemberFn() {
				if (!this.multipleSelection.length) {
					this.$message({
						type: 'error',
						message: '请选择要审核的会员'
					})
					return
				}
				this.centerDialog = true

			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			// 注册会员
			addSubmitFn() {
				let attr = !this.userMobile ? '请输入手机号' : !this.userPassword ? '请输入密码' : !this.editRoleValue ? '请选择角色' : ''
				if (attr) {
					this.$message({
						type: 'error',
						message: attr
					})
				}
				this.$ajax({
					api: 'member/add',
					params: {
						role: this.editRoleValue,
						token: getToken(),
						loginName: this.userMobile,
						password: this.userPassword,
						merchantUserId: window.localStorage.getItem('merchantUserId') ? window.localStorage.getItem('merchantUserId') :
							'',
					}
				}).then(res => {
					if (res.status === SUCCESS_REQUEST_STATUS) {
						this.$message({
							type: 'success',
							message: '添加成功'
						})
						this.page = 0
						this._initMemberData()
						this.centerDialogVisible = false
					}else{
						this.$message({
							type: 'error',
							message: res.data.message
						})
					}
				}).catch(err => {
					this.$message({
						type: 'error',
						message: err.message
					})
				})
			},
			memberAddFn() {
				this.centerDialogVisible = true
			},
			screenFn(num) {
				if (num == 2) {
					this.filterValue = this.keyword = this.userStatus = this.userRole = this.userType = ''
				}
				this.page = 0
				this._initMemberData()
			},
			_initMemberData() {
				this.$ajax({
					api: 'member/list',
					params: {
						token: getToken(),
						page: this.page,
						pageSize: this.pageSize,
						filter: this.filterValue,
						keyword: this.keyword,
						userStatus: this.userStatus,
						userRole: this.userRole,
						userType: this.userType,
						merchantUserId: window.localStorage.getItem('merchantUserId') ? window.localStorage.getItem('merchantUserId') :
							'',
					}
				}).then(res => {
					console.log(res)
					if (res.status === SUCCESS_REQUEST_STATUS) {
						this.memberList = res.data.usersList
						this.logPageTotal = res.data.page.total
						console.log(this.memberList)
					}
				}).catch(err => {
					console.log(err)
					this.$message({
						message: err.message,
						type: 'warning'
					})
				})
			},
			handleCurrentChange(page) {
				this.page = page
				this._initMemberData()
			}
		},
		components: {
			currentPage
		},
		computed: {
			...mapGetters([
				'getMemberAudit',
			])
		}

	}
</script>

<style>
	.mg-bg {
		border: 1px solid #e5e5e5;
		padding: 10px 0px;
		margin-bottom: 10px;
	}

	.page-box {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.avatar {
		width: 50px;
		height: 50px;
	}

	.sp-w-50 {
		width: 100px;
	}

	.role-span {
		display: inline-block;
		line-height: 30px;
		margin: 0 5px;
	}

	.user-box {
		width: 100%;
		max-width: 100%;
		height: 100%;
		flex: 1;
		display: flex;
		flex-direction: column;
		position: relative;
		overflow-x: auto;
	}

	.tab-box {
		width: 100%;
		height: auto;
		flex: 1;
		overflow: auto;
		border: 1px solid #e5e5e5;
	}

	.box-flex {
		display: flex;
		margin-bottom: 5px;
	}

	.w-span {
		min-width: 100px;
		line-height: 40px;
		display: inline-block;
	}
</style>
